import { Space } from 'antd';
import { useMemo } from 'react';
import { YmUpload } from 'ym-design';

export default () => {
  const defaultValue = useMemo(() => {
    return 'https://logibeat-test.oss-cn-hangzhou.aliyuncs.com/MegatronWeb/default/test/202304/20230415_0950_2f4d7a4378f54d23bcd18ace106250bd_Web.jpeg,https://logibeat-test.oss-cn-hangzhou.aliyuncs.com/MegatronWeb/default/test/202304/20230415_0950_e1b26ef8cf214cc0a823bc9bc2a22949_Web.jpeg'
      .split(',')
      .map((v, index) => {
        return {
          name: `文件文件文件文件文件文件文件文件文件文件文件文件文件${index}`,
          uid: v,
          url: v,
          size: Math.ceil(Math.random() * 10000),
        };
      });
  }, []);

  function upLoadOnChange1(fielList: any, file: any) {
    console.log('--fielList--file--:', fielList, file);
  }

  return (
    <div>
      <h2>图片类型的文件上传listType === 'image-card'(默认) | 'vide-card' </h2>
      <Space size={16}>
        <YmUpload
          maxCount={1}
          onChange={upLoadOnChange1}
          action="https://123456"
        >
          上传1张图片
        </YmUpload>
        <YmUpload maxCount={2} maxSize={100}>
          上传2图片
        </YmUpload>
        <YmUpload maxCount={2}>
          <>自定义卡片内容</>
        </YmUpload>
        <YmUpload maxCount={2} cardWidth={200} cardHeight={136}>
          自定义卡片宽高
        </YmUpload>
      </Space>
      <h2>普通文件列表形式上传 listType === 'info-list' | 'vide-card' </h2>
      <YmUpload
        listType="info-list"
        maxCount={10}
        defaultValue={defaultValue}
        wrapperStyle={{ width: 400 }}
        acceptExt="png"
      >
        选择上传文件
      </YmUpload>
      <h2>拖拽上传文件内容 type==='drag'</h2>
      <YmUpload
        type="drag"
        listType="info-list"
        maxCount={10}
        defaultValue={defaultValue}
      />
    </div>
  );
};
